… on forced leave

Pair with the Phase 1 backend change so a student who was kicked by the
teacher gets a specific in-modal banner instead of the generic "session
expired" alert, and lands on the seat-selection screen for the same
classroom — ready to pick a different seat in one click instead of
having to re-type the join code.

- classroom-api.js: attach the parsed response body to thrown Errors so
  callers can read response-specific fields (the 410 kick body carries
  reason/joinCode/className/seatNumber).
- classroom-error-utils.js: new `extractKickReason(err)` helper that
  returns the kick context for a 410 + reason='kicked', or null
  otherwise. Pure function, unit-tested in isolation.
- classroom-modal.jsx (container): when refreshStudentStatus catches an
  error, detect kick via extractKickReason. On kick: clear the local
  session, save a `kickedNotice` state, and call handleJoinWithCode with
  the kicked classroom's joinCode — which lookups the seat grid and
  flips phase to student-seat. On non-kick errors, keep the existing
  generic-alert path.
- ClassroomModal (component) + StudentSeatSelector: forward kickedNotice
  and onDismissKickedNotice. The selector renders a dismissible orange
  banner above the seat grid ("先生によってクラスから退室させられました
  ...") using the existing CSS-module styling vocabulary.
- locales: add `gui.classroom.kicked.banner.title` and `.subtitle` in
  en / ja / ja-Hira.
- Tests:
  * 6 cases for extractKickReason (happy path, missing body, non-kick
    410, null/undefined err, …)
  * 3 cases for classroom-api error-body propagation
- Playwright smoke verified end-to-end on localhost against the deployed
  stg backend: join seat 2 → teacher kicks via API → reopen modal →
  banner appears + seat-selection auto-displayed + seat 2 immediately
  re-selectable → re-join lands student back in student-joined.

Refs #692

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

… to different classroom

Previously, opening a `?classcode=<other>` URL while still holding a
session for a different classroom only cleared the local Redux state —
the previous seat stayed occupied on the server until TTL, so a
returning student or the teacher's grid kept treating the old seat as
"taken." With the Phase 0 move to localStorage this became much more
likely to bite, since the session survives tab close / browser restart.

Extract the URL-parameter decision into a pure helper
`decideClasscodeAction()` and unit-test it across the five cases:
fresh_join (no session), same_class (matching joinCode), switch_class
(different joinCode → release old seat + re-lookup), case-insensitive
join code match, and the malformed-state fallback (sessionToken but no
classroomId).

Wire the helper into the classcode useEffect so the switch_class branch
fires `classroomAPI.leaveClassroom(oldToken, oldClassroomId)` as a
best-effort, non-blocking call. We do not await it: a slow API or a
401 (e.g. server already expired the session) must not stall the new
lookup or block the student from joining the new classroom. The new
join takes precedence either way.

Playwright verified on localhost frontend against the deployed stg
backend:

  1. Join class A (seat 3) → `GET /members` shows seat-03 on A.
  2. Navigate to `?classcode=<B>` (different class) → land on seat
     selection for B, `GET /members` on A is now empty, lookup
     `takenSeats` on A returns [].
  3. Join class B (seat 2) → revisit `?classcode=<B>` → straight to
     student-status (same_class branch, no leave fired, lastActiveAt
     ticked on B).

Refs #692

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

While joined, the menu-bar button used to render
"{assignmentName || className} / {seatNumber}" (e.g. "第１回チャットアプリ
を作ろう / 03"). In user testing this turned out to be confusing — the
left half looked like a project title and it wasn't obvious that the
two-digit suffix was the seat number rather than a version or a date.

Replace the joined label with a fixed-format "クラス:出席番号NN" (English:
"Class: Seat NN"). The class / assignment name still lives in the modal
once opened, but is dropped from the always-visible bar so the bar
unambiguously identifies *what the number means*. The unjoined bar
remains "クラス" alone.

- menu-bar.jsx: switch the joined branch to a single FormattedMessage
  `gui.menuBar.classroomJoined` (with the seat-number span passed as a
  formatter value so the `classroom-menu-seat-number` testid is
  preserved for Playwright). The old `classroom-menu-class-name` span
  is removed — no test or tool referenced it.
- locales: add `gui.menuBar.classroomJoined` in en/ja/ja-Hira.
- docs: update docs/classroom/ui-ux.md, docs/classroom/testing.md and
  .claude/rules/scratch-gui/e2e-test.md to match the new format and
  drop the removed testid.

Playwright verified end-to-end on localhost: not-joined → "クラス";
joined to seat 4 → "クラス:出席番号04"; `classroom-menu-seat-number` is
still a child span; `classroom-menu-class-name` is no longer in the
DOM.

Refs #692

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…claim

Phase 4 of #692 — student-driven path for the case where a wrong-seat
classmate is occupying the seat the student wants. The student opens
the seat-selection screen, taps their own seat (currently grey/taken),
fires a kick request to the teacher, and waits; the teacher sees the
request next to the seat in the class-detail view and either approves
(which kicks the occupant, reusing Phase 1's tombstone path so the
kicked student gets the "you were removed" banner) or rejects (the
request disappears, the occupant stays).

CDK:
- New `ClassroomKickRequests{stageSuffix}` DynamoDB table with
  PK=classroomId, SK=requestId (UUID) so a single seat can hold multiple
  pending requests simultaneously. A `classroomId-seatNumber-index` GSI
  lets the approve handler delete all sibling requests for the same
  seat in one query so duplicates don't ghost-linger after a kick.
- KICK_REQUESTS_TABLE_NAME env wired into the Lambda; grantReadWriteData
  added.
- Four new HTTP API v2 routes:
    POST /classrooms/lookup/kick-request (no auth — joinCode + seatNumber)
    GET  /classrooms/{classroomId}/kick-requests (teacher auth)
    POST /classrooms/{classroomId}/kick-requests/{requestId}/approve
    DELETE /classrooms/{classroomId}/kick-requests/{requestId} (= reject)

Handler:
- KICK_REQUEST_TTL_SECONDS = 3600 (1 hour); rows expire automatically.
- MAX_KICK_REQUEST_REASON_LENGTH = 200; `validateKickRequestReason()`
  trims and enforces.
- `findClassroomWithSeatOccupied()` refuses requests for a seat that
  is already empty (or only holds a kick tombstone) so the teacher
  doesn't see noise from misclicks or stale clients.
- `handleApproveKickRequest()` calls into the existing
  `handleDeleteMember()` so the kicked student hits exactly the same
  410 reason='kicked' verify-session path as a direct teacher kick,
  then batch-deletes every kick request that targeted the same seat
  (the approved one and any duplicates).
- `handleRejectKickRequest()` deletes the single request row; the
  occupant is untouched.
- Anonymous create endpoint reuses the join-IP rate limiter; explicit
  abuse-prevention beyond that (e.g. dedupe by IP) is intentionally
  skipped per the Issue's "規制なし — 複数件のリクエストを許可" decision.

Integration tests against the deployed stg endpoint cover the full
flow plus auth boundaries — 60/60 new+existing tests green except for
one pre-existing failure (`/classrooms/lookup` expecting className to
be undefined, see aa35f9a) unrelated to this change.

Refs #692

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Wire the student-side UI for the Phase 4 kick-request endpoints. When a
student opens the seat-selection screen and finds the seat they actually
want already occupied (e.g. someone picked the wrong seat number first),
they can now tap the grey-tinted seat to send a request to the teacher.

- classroom-api.js: add createKickRequest, listKickRequests,
  approveKickRequest, rejectKickRequest methods.
- classroom-kick-request-storage.js: small localStorage helper that
  persists {requestId, joinCode, seatNumber, reason, createdAt} so the
  "依頼中" state survives a tab close or reload. Records older than the
  backend's 1h TTL are dropped on load so we don't keep showing the
  pending banner forever.
- StudentSeatSelector: render occupied seats as tappable when an
  onRequestKick handler is provided AND no pending request is already
  outstanding (we cap at one in-flight request to keep the teacher's
  view manageable). Show a blue "Waiting for the teacher to free seat
  NN..." banner above the grid while a request is pending. The dialog
  replaces the grid (vs. overlaying) so users on small viewports can
  still tap the buttons.
- KickRequestConfirmDialog (new): confirm dialog with an optional
  reason textarea (200 char max enforced both client- and server-side)
  and Cancel / Send buttons. The dialog inherits the modal's container
  styling so it doesn't introduce a new portal.
- classroom-modal.jsx container: holds dialog/pending state, calls the
  API, persists to localStorage, and polls lookupClassroom every 5s
  while a request is outstanding. When the targeted seat is no longer
  in takenSeats, the teacher acted (approve = handleDeleteMember
  kicked the occupant; reject = request just disappeared from the
  list; TTL = backend GC'd it after an hour) — we clear pending state
  so the student can re-pick the seat. Submitting a successful join
  also clears pending state.
- locales: gui.classroom.kickRequest.{title,body,reasonPlaceholder,
  cancel,submit,pendingBanner} in en/ja/ja-Hira.

End-to-end Playwright check on localhost against stg backend:
  1. seat 2 occupied by another student via API.
  2. Open `?classcode=...` → student-seat. Seat 2 is grey but
     clickable; `data-taken="1"` exposed for tests.
  3. Tap seat 2 → kick-request-confirm-dialog opens with title
     "出席番号02の人に退室を依頼しますか？".
  4. Type "私の席です" reason → submit → 201 from
     /classrooms/lookup/kick-request. Banner appears, seat 2 is no
     longer tappable (`data-taken="0"`), localStorage holds the
     pending record.
  5. Teacher approves via API. Within one polling tick (5s) the
     banner disappears, seat 2 becomes available, localStorage is
     cleared, and the student can now select it.

Unit tests added (14 total):
  * createKickRequest: payload shape, omits reason, no Authorization
    header
  * Storage helper: load/save/clear, stale-record drop, malformed
    JSON, missing fields, no-op for invalid input

Refs #692

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Wire the teacher's side of the Phase 4-5 kick-request flow into the
existing class-detail screen. The seat grid shows a red "!" badge on
each occupied seat that has any pending request, and the member-detail
panel (which opens when the teacher clicks a seat) gains a yellow
"requests from students" panel listing each request's optional reason
with per-request Approve / Reject buttons.

Approve calls /classrooms/{id}/kick-requests/{rid}/approve which
already triggers the same kick path as the manual Remove button — the
kicked student gets the 410 reason='kicked' verify-session response
and the seat opens up in `lookupClassroom` for whoever was waiting.
Reject just deletes the request row; the occupant stays.

- use-teacher-classrooms.js: parallel-fetch listKickRequests alongside
  listMembers + listSubmissions on both initial load and the 30s
  auto-refresh. Group by seatNumber for fast lookup in the renderer.
  Add `handleApproveKickRequest` / `handleRejectKickRequest`, which
  also call `refreshMembersOnly` so the seat grid and member panel
  reflect the kick / cleared request without an extra round trip.
  Reset kickRequestsBySeat in resetClassrooms, handleBackToDashboard.
- use-teacher-classroom.js: forward the new state + handlers through
  the aggregator.
- classroom-teacher-modal (container + presentational): pass
  kickRequestsBySeat / onApproveKickRequest / onRejectKickRequest
  through to TeacherClassDetail.
- TeacherClassDetail: add a red "!" badge (`seat-kick-request-badge`)
  to each member cell with pending requests; expose seat-level
  `data-testid="classroom-seat-kick-request-{N}"` for tests. Compute
  the per-seat slice of kickRequestsBySeat for the selected seat and
  pass it to TeacherMemberDetail.
- TeacherMemberDetail: render a `kick-request-panel` below the Remove
  button when the selected seat has pending requests, with one row
  per request (reason or "(no reason given)" placeholder, plus
  per-request Approve / Reject buttons). Buttons are bound via stable
  callbacks to satisfy `react/jsx-no-bind`.
- classroom-modal.css: `seat-kick-request-badge` (absolute-positioned
  red dot, requires the cell to be `position: relative` — added to
  `.member-cell`), and the yellow `kick-request-panel` plus inner
  styles for the approve (red) / reject (light) buttons.
- locales: gui.classroom.kickRequest.{teacherTitle,noReason,approve,
  reject} in en/ja/ja-Hira (teacherTitle is plural-aware via ICU).

End-to-end Playwright check against deployed stg:
  1. Teacher logs in via devlogin, opens a class with seat 3 occupied
     and one outstanding kick request.
  2. Seat-3 cell shows the red "!" badge.
  3. Clicking seat 3 opens the member detail; "1 件の退室リクエストが
     届いています" header + "「これは私の席です」" reason + Approve /
     Reject buttons.
  4. Reject → request gone, badge cleared, member still seated;
     `GET /kick-requests` empty, `GET /members` still has seat-03.
  5. Send a new request via curl. Refresh → badge reappears. Approve
     → seat-03 removed from `GET /members`, request cleared, badge
     gone.

Refs #692

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Bring the classroom docs in sync with the Phase 1-6 implementation:

- README: new "強制退室通知と退室リクエスト" section pointing readers at
  the new flows and noting the sessionStorage → localStorage migration
  + classcode auto-leave behavior.
- architecture.md: API route table now lists
  /classrooms/lookup/kick-request and the three teacher kick-request
  endpoints; verify-session is documented to return 410 with reason
  for kicked sessions. New ClassroomKickRequests table (PK
  classroomId / SK requestId, classroomId-seatNumber-index GSI, TTL
  1h) and the membership kick-tombstone shape are described in their
  own subsections.
- user-stories.md: two new student stories (request the teacher free a
  seat / handle being kicked with the in-modal banner) and one new
  teacher story (approve/reject pending kick requests in the
  member-detail panel).
- testing.md + .claude/rules/scratch-gui/e2e-test.md: data-testid
  tables list every new selector
  (classroom-kicked-banner, kick-request-confirm-dialog,
  kick-request-reason-input, kick-request-submit/cancel/error,
  kick-request-pending-banner, classroom-seat-kick-request-{N},
  classroom-member-kick-request-panel,
  classroom-kick-request-row/approve/reject-{requestId}).
- source-code.md: new file entries (kick-request-confirm-dialog.jsx,
  classroom-kick-request-storage.js); classroom-api.js method count
  bumped 20 → 24.
- screenshots/: add four new captures
  (0103 menu-bar joined, 0208 teacher kick-request panel,
   0307 student kicked banner, 0308 student kick-request pending).

Refs #692

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…jected

Two follow-up fixes after the first round of preview-URL verification:

1) **Reject UX**: a student who sent a kick request used to watch the
   "依頼中です…" banner for up to an hour after the teacher hit Reject —
   the banner only cleared once the polling lookup observed the seat go
   empty, which never happens on rejection. Surface active kick-request
   IDs from the public lookup endpoint so the student's 5-second poll
   can also detect "my request is gone but the seat is still taken =
   rejected (or TTL'd)" and swap the pending banner for a red "出席番号NN
   の退室は受理されませんでした。別の席を選ぶか、もう一度依頼を出してくだ
   さい。" banner with a × dismiss button. The same banner clears
   automatically on a new request submission or a successful join.

   - handler.ts `handleLookupClassroom`: also query the kick-requests
     table and return `activeKickRequestIds: string[]` alongside the
     existing fields. The IDs are UUIDs the client already received
     from `/lookup/kick-request`, so no new auth boundary.
   - integration test: covers (a) ID present after submit,
     (b) absent after reject.
   - classroom-modal container: polling now branches on
     `seatStillTaken` × `requestStillActive` and drives a new
     `kickRequestRejectedNotice` state.
   - StudentSeatSelector + classroom-modal component: new banner
     rendered when the rejected notice is set and no pending banner is
     active. Banner is dismissible
     (`kick-request-rejected-banner-dismiss`) and also clears when the
     student opens a fresh kick dialog or successfully joins another
     seat.
   - locales: `gui.classroom.kickRequest.rejectedBanner` in en / ja /
     ja-Hira.

2) **Seat color alignment**: the teacher's class-detail grid showed
   empty = grey and occupied = blue, which was the inverse of the
   student's seat-selection grid (empty = blue, occupied = grey).
   Swap the two member-cell color classes so the role-independent
   rule "blue = available, grey = occupied-but-no-submission" holds on
   both sides. Submitted (green) and returned (orange) keep their
   teacher-only colors.

End-to-end Playwright check against the updated stg backend:
  1. Student joins seat 2 → seat is grey in the teacher view.
  2. Another student taps seat 2 → kick-request submitted, pending
     banner appears, server returns the requestId in
     `activeKickRequestIds`.
  3. Teacher rejects → within ≤ 5 s the student's polling tick swaps
     the blue pending banner for the red rejected banner; pending
     cleared from localStorage; seat 2 is tappable again so the
     student can send a new request if needed.

Refs #692

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>